<template>
  <div>
    <div class="div">
      <div class="title"><span>车位管理 </span> 用于管理小区里，每一个停车位的基本信息</div>
      <el-card class="el-card">
        <!-- <span>角色名</span> -->
        <el-form :inline="true" class="demo-form-inline">
          <el-form-item>
            <div class="titl">小区名称</div>
            <el-select v-model="cummity" placeholder="请选择" filterable>
              <el-option
                v-for="item in cummitylists"
                :key="item.id"
                :label="item.name"
                :value="item.code"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <div class="titl">标题</div>
            <el-input v-model="inpt" placeholder="请输入" />
          </el-form-item>
          <el-form-item>
            <div class="titl">类型</div>
            <el-select v-model="value" placeholder="请选择" filterable>
              <el-option
                v-for="item in option"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <div class="titl">状态</div>
            <el-select v-model="title" placeholder="请选择" filterable>
              <el-option
                v-for="item in options"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item class="btn">
            <el-button type="primary" class="bttn" @click="search">搜索</el-button>
            <el-button class="bttn" @click="think">重置</el-button>
          </el-form-item>
        </el-form>
      </el-card>
      <el-card class="elcard">
        <el-tabs>
          <!-- 按钮 -->
          <el-button
            size="small"
            type="primary"
            class="addbtn"
            @click="showdlog"
          >新增通知</el-button>
          <!-- 表格 -->
          <el-table :data="adverlist">
            <el-table-column label="ID" width="50" prop="id" />
            <el-table-column label="小区名称" width="150" prop="community.name">
              <template #default="{row}">
                <span v-if="row.community===null">未知</span>
                <span v-else>{{ row.community.name }}</span>
              </template>
            </el-table-column>
            <el-table-column label="标题" prop="title" />
            <el-table-column label="封面图" width="150">
              <template #default="{row}">
                <el-image
                  style="width: 100px; height: 100px"
                  :src="'http://124.223.14.236:8881'+row.pic_url ||defaultImg"
                  :preview-src-list="['http://124.223.14.236:8881'+row.pic_url ||defaultImg]"
                />
                <!-- <img v-imgerror="defaultImg" :src="'http://124.223.14.236:8881'+row.pic_url ||defaultImg" alt="" class="img"> -->
              </template>
            </el-table-column>
            <el-table-column label="类型" prop="status">
              <template #default="{row}">
                <span v-if="row.type===1">通知</span>
                <span v-else>公告</span>
              </template>
            </el-table-column>
            <el-table-column label="状态" prop="type">
              <template #default="{row}">
                <span v-if="row.status===1">启用</span>
                <span v-else>关闭</span>
              </template>
            </el-table-column>
            <el-table-column label="权重" prop="sort" />
            <el-table-column label="操作">
              <template #default="{row}">
                <el-button type="text" @click="DeleteList(row.id)">删除</el-button>
                <el-button type="text" @click="putlist(row.id)">编辑</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tabs>
        <el-pagination
          :current-page="current"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </el-card>
    </div>
    <Advlist ref="Notice" :drawer.sync="drawer" />
  </div>
</template>

<script>
import Advlist from '@/views/content/notice/index.vue'
import { AdvertisinglistAPI, DeleteListAPI, coummityAPI } from '@/api/notice'
export default {
  components: {
    Advlist
  },
  data() {
    return {
      defaultImg: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F5ffd460a-0597-4700-b128-dc50ac4b34f1%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1682212227&t=94c598dbeac83e843a0563451ce0b482',
      value1: '',
      drawer: false,
      pageSize: 10,
      current: 1,
      adverlist: [], // 列表数据
      cummitylists: [], // 表单数据
      status: '',
      name: '',
      total: 0,
      option: [{ id: 2, name: '公告' }, { id: 1, name: '通知' }],
      value: '',
      options: [{ id: 2, name: '关闭' }, { id: 1, name: '启用' }],
      title: '',
      cummity: '',
      inpt: '',
      fakdata: []
    }
  },
  created() {
    this.advertisinglist()
    this.cummitylist()
  },
  methods: {
    /**
   * 点击新增弹层显示
   */
    showdlog() {
      this.drawer = true
    },
    /**
     * 获取通知公告列表
     */
    async advertisinglist() {
      const { data: res } = await AdvertisinglistAPI({
        pageSize: this.pageSize,
        current: this.current
      })
      console.log(res)
      this.adverlist = res.rows
      this.total = res.count
    },
    /**
     * 每页数量发生变化时改变
     */
    handleSizeChange(val) {
      console.log(val)
      this.pageSize = val
      this.current = 1
      this.advertisinglist()
    },
    /**
     * 当前页发生变化时改变
     */
    handleCurrentChange(val) {
      console.log(val)
      this.current = val
      this.advertisinglist()
    },
    /**
     * 删除列表
     */
    DeleteList(id) {
      // console.log(id)
      this.$confirm('确认删除吗', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(async() => {
        await DeleteListAPI(id)
        this.$message.success('删除成功')
        this.advertisinglist()
      })
    },
    /**
     * 获取顶部表单小区数据
     */
    async cummitylist() {
      const { data: res } = await coummityAPI()
      // console.log(res)
      this.cummitylists = res
    },
    /**
     * 回显表单
     */
    async  putlist(id) {
      this.drawer = true
      this.$refs.Notice.detalist(id)
    },
    /**
     * 重置
     */
    think() {
      this.advertisinglist()
      this.cummity = ''
      this.inpt = ''
      this.value = ''
      this.title = ''
    },
    /**
     * 搜索
     */
    async  search() {
      const { data: res } = await AdvertisinglistAPI({
        pageSize: 999,
        current: 1,
        community_code: this.cummity,
        title: this.inpt,
        status: this.title,
        type: this.value
      })
      // console.log(res)
      this.adverlist = res.rows
      this.total = res.count
    }
  }
}
</script>

<style lang="scss" scoped>
.el-form-item {
margin-right: 22px;

 ::v-deep .el-input__inner{
height: 35px;
line-height: 35px;
width: 200px;
 }
}
.div{
  position: relative;
  .title{
    position: absolute;
    top: -33px;
    left: 70px;
    span{
      font-weight: 700;
    }
}
.el-card{
  margin-top: 80px;
  margin-left: 70px;
  margin-right: 70px;
  .btn{
    margin-top: 40px;
    .bttn{
      height: 35px;
    }
  }
}
.elcard{
  margin-top: 20px;
  .addbtn{
    margin-bottom: 10px;
   float: right;
   margin-right: 50px;
  }
  .img{
    width: 80px;
    height: 80px;
  }
}
}
</style>
